<template>
  <div class="side-menu">
    <el-menu
      class="el-menu-vertical-demo"
      router
      :collapse="isCollapse"
      :default-active="$route.meta.activePath as string"
      background-color="transparent"
    >
      <el-menu-item
        v-for="item in sideMenuList"
        :index="item.path"
        :key="item.path"
      >
        <el-icon size="20">
          <Location />
        </el-icon>
        <template #title>
          <div class="menu-item">
            {{ item.meta?.name }}
          </div>
        </template>
      </el-menu-item>
    </el-menu>
    <div
      class="menu-collapse"
      :class="[isCollapse ? 'active-img' : '']"
      @click="hanldeCollapse"
    >
      <img src="../../assets/image/left.png" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMenuStoreHook } from "@/store/module/menu";
import { Location } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
import { RouteRecordRaw } from "vue-router";

// 事件传递
const emits = defineEmits(["collapse"]);
/**
 * @description 获取右侧菜单列表
 */
const sideMenuList = ref<RouteRecordRaw[]>([]);
watch(
  () => useMenuStoreHook().getchildList,
  (curr) => {
    sideMenuList.value = curr;
  },
  {
    deep: true,
    immediate: true,
  },
);
const isCollapse = ref(false);

const hanldeCollapse = () => {
  isCollapse.value = !isCollapse.value;
  emits("collapse", isCollapse.value);
};
</script>

<style scoped lang="scss">
.side-menu {
  width: 100%;
  height: 100%;
  position: relative;

  .menu-collapse {
    position: absolute;
    left: 50%;
    top: calc(50% - 15px);
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 30px;
      height: 30px;
    }

    &:hover {
      transition: 0.3s;
      cursor: pointer;
      transform: scale(1.1);
    }

    &.active-img {
      transform: rotate(180deg);

      &:hover {
        cursor: pointer;
        transform: scale(1.1);
      }
    }
  }
}

.el-menu {
  border-right: none;
  // width: 100%;
  height: 100%;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
}
</style>
